<template>
  <div>
    <v-card
        max-width="600"
        class="mx-auto mt-6"
    >
      <v-container>
        <v-row comfortable>
          <v-col cols="12">
            <v-card
                color="#1F7087"
                theme="dark"
                hover
            >
              <div class="d-flex flex-no-wrap justify-space-between px-4">
                <div>
                  <v-card-title class="text-h5">
                    SDS-抑郁测评
                  </v-card-title>

                  <v-card-subtitle>怀疑自己有抑郁？测试一下！</v-card-subtitle>
                  <v-avatar
                      class="ma-3"
                      size="50"
                      rounded="0"
                  >
                    <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                  </v-avatar>
                </div>
                <v-card-actions>
                  <v-btn
                      class="ms-2"
                      variant="outlined"
                  >
                    免费测评
                  </v-btn>
                </v-card-actions>
              </div>
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card
                color="#952175"
                theme="dark"
                hover
            >
              <div class="d-flex flex-no-wrap justify-space-between px-4">
                <div>
                  <v-card-title class="text-h5">
                    SCL-90心理评估
                  </v-card-title>

                  <v-card-subtitle>综合心理健康评估，认识最真实的自己！</v-card-subtitle>

                  <v-avatar
                      class="ma-3"
                      size="50"
                      rounded="0"
                  >
                    <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                  </v-avatar>
                </div>
                <v-card-actions>
                  <v-btn
                      class="ms-2"
                      variant="outlined"
                  >免费测评</v-btn>
                </v-card-actions>
              </div>
            </v-card>
          </v-col>

          <v-col cols="12">
            <v-card
                color="#8c9eff"
                theme="dark"
                hover
            >
              <div class="d-flex flex-no-wrap justify-space-between px-4">
                <div>
                  <v-card-title class="text-h5">
                    MBTI十六人格测试
                  </v-card-title>

                  <v-card-subtitle>广泛应用于职业发展及恋爱社交等领域</v-card-subtitle>

                  <v-avatar
                      class="ma-3"
                      size="50"
                      rounded="0"
                  >
                    <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                  </v-avatar>
                </div>
                <v-card-actions>
                  <v-btn
                      class="ms-2"
                      variant="outlined"
                  >免费测评</v-btn>
                </v-card-actions>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </div>
</template>

<script>
</script>

<style scoped>

</style>
